<template>
  <div>
    <div class="page1-top" :style="{backgroundImage: 'url('+bannerUrl+')'}">
    </div>
    <div class="page2-bottom">
      <title-card class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".3s" swiper-animate-delay=".1s" :title="'申请流程'" :en="'Procedure'"></title-card>
      <ul class="process-flex">
        <li class="ani" :class="'item'+(index+1)" v-for="(child,index) in processList"
        :key="index" swiper-animate-effect="zoomIn" swiper-animate-duration=".2s"
        :style="{backgroundImage: 'url('+child.img+')',backgroundSize: pxToRem(child.width)+'rem'}"
        :swiper-animate-delay="(index+1)*0.2+'s'">{{child.intro}}</li>
      </ul>
    </div>
  </div>
</template>

<script>

  import titleCard from 'src/views/titleCard/titleCard'
  export default {
    data () {
      return {}
    },
    props: {
      bannerUrl: {
        type: String,
        default () {
          return ''
        }
      },
      processList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    methods: {
    },
    components: {
      titleCard
    },
    created () {
    }
  }
</script>

<style lang="scss" scoped>
  .page1-top {
  	position: relative;
  	height: rem(410);
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	&::after {
  		position: absolute;
  		content: '';
  		width: 100%;
  		height: 100%;
  		left: 0;
  		top: 0;
  		background-color: rgba(0, 0, 0, 0.3);
  	}
  }
  .page2-bottom {
  	height: rem(800);
  	background: url('./img/wages-page3-bg2.jpg') top center no-repeat;
  	background-size: cover;
  }
  .process-flex {
  	display: flex;
  	padding-top: rem(50);
  	flex-wrap: wrap;
  	> li {
  		width: 50%;
  		text-align: center;
  		overflow: hidden;
  		height: rem(245);
  		font-size: rem(34);
  		color: #333;
  		line-height: rem(300);
  		@each $index in 1, 2, 3, 4 {
  			&.item#{$index} {
  				background-repeat: no-repeat;
  				background-position-x: center;
  				@if $index == 1 {
  					background-size: rem(85) auto;
  					background-position-y: rem(8);
  				} @else if $index == 2 {
  					background-size: rem(79) auto;
  				} @else if $index == 3 {
  					background-size: rem(63) auto;
  					background-position-y: rem(8);
  				} @else if $index == 4 {
  					background-size: rem(86) auto;
  					background-position-y: rem(8);
  				}
  			}
  		}
  	}
  }
</style>
